<template>
  <a-select
    v-model="selectedValue"
    :placeholder="placeholder"
    :filter-option="false"
    :not-found-content="loading ? undefined : null"
    @search="loadData"
    @change="handleChange"
    :getPopupContainer="getParentContainer"
    showSearch
    :disabled="disabled"
    style="width: 100%"
    allowClear
  >
    <a-spin v-if="loading" slot="notFoundContent" size="small" />
    <a-select-option v-for="d in options" :key="d.value" :value="d.value">{{ d.text }}</a-select-option>
  </a-select>
</template>

<script>
import { ajaxGetDictItems, getDictItemsFromCache } from '@/api/api'
import debounce from 'lodash/debounce'
import { getAction } from '../../api/manage'

export default {
  name: 'SearchSelectTag',
  props: {
    disabled: Boolean,
    value: [String, Number],
    placeholder: {
      type: String,
      default: '请选择',
      required: false,
    },
    dict: {
      type: String,
      default: '',
      required: false,
    },
    popContainer: {
      type: String,
      default: '',
      required: false,
    },
    pageSize: {
      type: Number,
      default: 5,
      required: false,
    },
    getPopupContainer: {
      type: Function,
      default: null,
    },
  },
  data() {
    this.loadData = debounce(this.loadData, 800) //消抖
    this.lastLoad = 0
    return {
      loading: false,
      selectedValue: [],
      options: [],
      pattern: new RegExp("[\u4E00-\u9FA5]+")
    }
  },
  created() {
  },
  watch: {
    value: {
      immediate: true,
      handler(val) {
        if (!val) {
          if (val == 0) {
            this.initSelectValue()
          } else {
            this.selectedValue = []
          }
        } else {
          this.initSelectValue()
        }
      },
    },
  },
  methods: {
    initSelectValue() {
      this.selectedValue = this.value.toString()
    },
    loadData(value) {
      console.log('数据加载', value)
      if (!this.pattern.test(value)) return
      this.lastLoad += 1
      const currentLoad = this.lastLoad
      this.options = []
      this.loading = true
      // 字典code格式：table,text,code
      getAction(`/sys/dict/loadDict/${this.dict}`, { keyword: value, pageSize: this.pageSize }).then((res) => {
        this.loading = false
        if (res.success) {
          if (currentLoad != this.lastLoad) {
            return
          }
          this.options = res.result
          console.log('我是第一个', res)
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    handleChange(selectedValue) {
      console.log('selectedValue', selectedValue)
      this.selectedValue = selectedValue
      this.callback()
    },
    callback() {
      this.$emit('change', this.selectedValue)
    },
    getParentContainer(node) {
      if (typeof this.getPopupContainer === 'function') {
        return this.getPopupContainer(node)
      } else if (!this.popContainer) {
        return node.parentNode
      } else {
        return document.querySelector(this.popContainer)
      }
    },
  },
  model: {
    prop: 'value',
    event: 'change',
  },
}
</script>

<style scoped>
</style>